﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates splitter's events" />
    <title id='Description'>This demonstration shows how to create a splitter that fits the entire browser window's contents.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

			var url = "../../sampledata/customers.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                height: '100%',
                source: dataAdapter,
				showtoolbar: true,                
				rendertoolbar: function (toolbar) {
					//var me = this;
					var container = $("<div style='margin: 5px;'></div>");                    
					toolbar.append(container);                    
					container.append('<input id="addrowbutton" type="button" value="Add New Row" />');                    					               					container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');                              					$("#addrowbutton").jqxButton();                    
					$("#deleterowbutton").jqxButton();
					// delete row.                   
					$("#deleterowbutton").on('click', function () {
						var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');           
						var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;           
						if (selectedrowindex >= 0 && selectedrowindex < rowscount) {                   
							var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);          
							var commit = $("#jqxgrid").jqxGrid('deleterow', id);               
						}                 
					});           
				},
				columnsresize: true,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
                  { text: 'Country', datafield: 'Country', width: 100 }
                ]
            });
            $('#splitter').jqxSplitter(
            {
           		width: '100%', height: '100%', 
           		panels: [{ size: '70%', min: 150 }, { size: '30%', min: 250}] 
           	});

        });
    </script>
    <style type="text/css">
    html, body 
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    </style>
</head>
<body>
    <div id='splitter'>
        <div>
        	<div style="border: none;" id='jqxgrid'></div>
        </div>
        <div>dsgdfgdgsdgsdgd</div>
    </div>
    </body>
</html>